﻿<!DOCTYPE html>
<html>
<head>
    <title>RateIt</title>
    <link href="rateit.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
	<script src="jquery.rateit.min.js" type="text/javascript"></script>	
</head>
<body>
	<div class="rateit" id="111" data-rateit-value="1"></div><br>
	<div class="rateit" id="222" data-rateit-value="1.5"></div><br>
	<div class="rateit" id="333" data-rateit-value="2"></div><br>
	<div class="rateit" id="444" data-rateit-value="3"></div><br>
	<div class="rateit" id="555" data-rateit-value="3.5"></div><br>
</body>
 <script type ="text/javascript">
     $('.rateit').bind('rated reset', function (e) {
         var ri = $(this); 
         var value = ri.rateit('value');//get value
         ri.rateit('readonly', true);//lock
		 var id=ri.attr("id");//=>select ID
		 alert("value=" + value + " ,ID=" + id);
		/*
         $.ajax({
             url: 'rateit.aspx', //your server side script
             data: { id: id, value: value }, //our data
             type: 'POST',
             success: function (data) {
                 $('#response').append('<li>' + data + '</li>');
 
             },
             error: function (jxhr, msg, err) {
                 $('#response').append('<li style="color:red">' + msg + '</li>');
             }
         });
		 */
     });
 </script>
</html>
